const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
    transpileDependencies: true,
    // 基本路径(生产环境构建目录)
    publicPath: '/',
    lintOnSave: process.env.NODE_ENV === 'development',
    // 输出文件目录
    outputDir: 'dist',
    // 静态资源目录
    assetsDir: 'static',
    productionSourceMap: process.env.NODE_ENV === 'development',
    // 开发服务器配置
    devServer: {
        port: 8080,
        open: true,
        // proxy: {
        //     '/api': {
        //         target: '',
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^/api': '',
        //         },
        //     },
        // },
        // overlay: {
        //     warnings: false, // 禁用警告
        //     errors: true, // 启用错误
        // },
    },

    // webpack 高级配置
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
                '@assets': path.resolve(__dirname, 'src/assets'),
                '@components': path.resolve(__dirname, 'src/components'),
            },
            extensions: ['.js', '.vue', '.json'],
        },
        performance: {
            hints: false,
            maxAssetSize: 2 * 1024 * 1024, // 整数类型（以字节为单位）
            maxEntrypointSize: 2 * 1024 * 1024, // 整数类型（以字节为单位）
            assetFilter: function (assetFilename) {
                // 提供资源文件名的断言函数
                return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
            },
        },

        externals:
            process.env.NODE_ENV === 'production'
                ? {
                      vue: 'Vue',
                      'vue-router': 'VueRouter',
                      'element-ui': 'ELEMENT',
                      axios: 'axios',
                  }
                : {},
    },

    // 链式配置
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')

        // 代码分割
        config.optimization.splitChunks({
            chunks: 'all',
            cacheGroups: {
                libs: {
                    name: 'chunk-libs',
                    test: /[\\/]node_modules[\\/]/,
                    priority: 10,
                    chunks: 'initial', // 只打包初始时依赖的第三方
                },
                elementUI: {
                    name: 'chunk-elementUI', // 单独将 elementUI 拆包
                    priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
                    test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                },
                commons: {
                    name: 'chunk-commons',
                    test: path.resolve(__dirname, 'src/components'), // 可以自定义规则
                    minChunks: 3, // 最小共用次数
                    priority: 5,
                    reuseExistingChunk: true,
                },
            },
        })
        // 开启gzip压缩
        config.plugin('compression-webpack-plugin').use(require('compression-webpack-plugin'), [
            {
                algorithm: 'gzip',
                test: /\.js$|\.html$|\.json$|\.css/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                minRatio: 0.8, // 压缩率小于0.8才会压缩
                deleteOriginalAssets: false, // 不删除源文件
            },
        ])
        // 静态资源CDN设置
        // config.plugin('html').tap(args => {
        //     args[0].cdn = {
        //         js: [
        //             'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
        //             'https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js',
        //         ],
        //         css: [],
        //     }
        //     return args
        // })
        config.module.rule('svg').exclude.add(path.resolve('src/icons')).end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(path.resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            })
            .end()

        // 压缩图片
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                mozjpeg: { progressive: true, quality: 65 },
                optipng: { enabled: false },
                pngquant: { quality: [0.65, 0.9], speed: 4 },
                gifsicle: { interlaced: false },
                webp: { quality: 75 },
            })
            .end()
    },

    // 插件配置
    pluginOptions: {
        // 第三方插件配置
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                path.resolve(__dirname, 'src/assets/styles/variables.scss'),
                path.resolve(__dirname, 'src/styles/mixins.scss'),
            ],
        },
    },
})
